<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <!-- 必须的 meta 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <!-- Bootstrap 的 CSS 文件 -->
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #app{
            display: inline-block;
            margin-left: 5px;
        }
    </style>
</head>
<body>
<div class="container-fluid content" id="matterCount">
    <div class="toolbar" style="float: right">
        <input type="text" id="selName" placeholder="请输入id">
        <button class="btn btn-primary" @click="selCustomerByName()">查询</button>
    </div>
    <table id="customer-tab" class="table table-hover" style="text-align: center;line-height: 38px">
        <tr>
            <th><input type="checkbox" @click="allCheck" id="checkAll"/></th>
            <th>ID</th>
            <th>员工id</th>
            <th>登录时间</th>
            <th>ip</th>
            <th>是否登录成功</th>
        </tr>
        <tr v-for="l in list">
            <td><input class="check" @click="isCheckAll" type="checkbox" :value="l.loginId"></td>
            <td>{{ l.loginId }}</td>
            <td>{{ l.employeeId }}</td>
            <td>{{ l.loginTime}}</td>
            <td>{{ l.ip }}</td>
            <td>{{ l.loginType==1?"是":"否" }}</td>
        </tr>
    </table>
    <!--            分页-->
    <div class="pagination-div">
        <!--                无序列表 -->
        <ul class="pagination" id="page-ul">
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);" @click="cutPage(1)">首页</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=1">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow-1)">{{page.pageNow-1}}</a></li>
            <li class="page-item active">
                <a class="page-link" href="javascript:void(0);">{{page.pageNow}}</a>
            </li>
            <li class="page-item" v-if="page.pageNow!=page.pageTotal">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageNow+1)">{{page.pageNow+1}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);
                   ">共{{page.count}}条数据</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0);"
                   @click="cutPage(page.pageTotal)">尾页</a>
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript" src="../bootstrap/vue.js"></script>
<script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../bootstrap/my.js"></script>
<script>
    let matterPriceVue;
    let map;

    // 初始化表格数据
    $(function () {
        // 调用查询方法 因为是第一次查询所以当前页参数1
        map = selMatter(1);
        // Vue列表 表格数据
        matterPriceVue = new Vue({
            el: '#matterCount',
            data: {
                list: map.list,// 展示表格
                page: map,// 用于分页
                matter:{}
            },// 参数调用查询函数
            methods: {
                allCheck: function () {
                    eventHub.$emit("allCheck",null);
                },

                isCheckAll: function () {
                    eventHub.$emit("isCheckAll",null);
                },
                cutPage: function (pageNow) {
                    var z=$("#selName").val();
                    matterPriceVue.list = selMatter(pageNow,z).list;
                    matterPriceVue.page.pageNow = pageNow;
                },
                selCustomerByName:function (){
                    var z=$("#selName").val();
                    matterPriceVue.list = selMatter(1,z).list;
                    matterPriceVue.page = selMatter(1,z);
                },
    }
    })
    })

    function selMatter(pageNow,employeeId) {
        let map = [];
        $.ajax({
            type: "post",
            url: "../LoginController/selLoginLog",
            data: {pageNow: pageNow, pageCount: 5,employeeId: employeeId },// 携带当前页参数，显示的条数
            dataType: "json",
            async: false,
            success: function (data) {
                // 接受Controller层查询结果
                map = data;
            }
        });
        return map;
    }



</script>
</body>
</html>